<template>
    <div class="my-company">
        <div class="mc-main">
            <div class="mcm-top">
                <div class="mcmt-left">
                    <img :src="companyAvtar" alt="" class="mcmtl-left"/>

                    <div class="mcmtl-right">
                        <p>
                            {{companyName}}
                            <span @click="sure_tankaung">
                <i class="el-icon-edit-outline"></i>
                编辑
              </span>
                        </p>
                        <p>{{companyCode}}</p>
                    </div>
                </div>

                <div
                        class="mcmt-right"
                        @click="drawer = true">
                    <i class="el-icon-setting"></i>
                    设置
                </div>
            </div>
            <div class="mcm-two">
                <div class="mc-common-title">
                    <div class="mcct-left">
                        <span></span>
                        <span>基本信息</span>
                    </div>
                </div>
                <div class="mcmt-main">
                    <div class="mcmtm-left">
                        <p><span>客户名称</span>{{this.companyName}}</p>
                        <p><span>联系人</span>{{aboutPerson}} </p>
                    </div>
                    <div class="mcmtm-left">
                        <p><span>客户编码</span>{{companyCode}}</p>
                        <p><span>联系电话</span>{{aboutPhone}}</p>
                    </div>
                </div>
            </div>
            <CompanyOne/>
            <CompanyTwo/>
            <CompanyFour/>
            <CompanyThere/>
        </div>


        <el-drawer
                title="我是标题"
                :visible.sync="drawer"
                :with-header="false"
        >
            <div class="mc-drawer">
                <div class="mcd-top">
                    <span></span>
                    <span>公司设置</span>
                </div>
                <ul class="mcd-main">
                    <li>
                        <p>公司名称</p>
                        <p style="margin-left: -25px;"><el-input v-model="company_name" placeholder="请输入您新的公司名称"/></p>
                        <p></p>
                    </li>
                    <li>
                        <p style="color: #2D2D2D">联系人</p>
                        <p><el-input style="margin-right: 13px" v-model="company_personal" placeholder="请输入公司联系人"/></p>
                        <p></p>
                    </li>
                    <li>
                        <p>联系电话</p>
                        <p><el-input style="margin-right: 25px" v-model="company_phone" placeholder="请输入公司联系电话" disabled/></p>
                        <p></p>
                    </li>
                    <li>
                        <p>上传公司头像</p>
                        <el-upload
                                action=" https://api.nbyid.cn/mlcc/user/interface/uploadImage"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove"
                                :on-success="handleSuccess"
                                ref="upload" style="margin-right: 100px;width: 100px;height: 100px">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </li>
                </ul>
                <p class="mcd-btn" @click="updateset">确认修改</p>
            </div>
        </el-drawer>
    </div>
</template>


<script>
  import CompanyOne from "./company-one";
  import CompanyTwo from "./company-two";
  import CompanyFour from "./company-four";
  import CompanyThere from "./company-there";
  import {getAction, postAction} from '@/api/manage'
  import Qs from "qs";

  export default {
        components: {
            CompanyOne,
            CompanyTwo,
            CompanyFour,
            CompanyThere,
        },
        data() {
            return {
                //公司信息
                company_name:'',
                company_personal:'',
                company_phone:'',
                dialogImageUrl:'',
                token:localStorage.getItem("token"),
                username:"",
                password:"",
                paypassword:"",
                adress:"",
                realname:"",
                companyId:'',//公司id
                companyName: '', //公司名字
                companyCode: '', //公司编码
                companyAvtar:'',//公司头像
                aboutPerson: '',//联系人
                aboutPhone: '',//联系电话

                company: [],
                drawer: false,
                url: {
                    list: '/company/querycompanyBytoken',
                    updat_Finstatus: '/gongzi/updatezt',
                    show_data_token: '/user/interface/query_userInfoBytoken',
                    query_companyinfo: '/user/interface/query_companyById',
                    update_user_data: '/user/interface/update_userInfoById',
                    update_companyinfo: '/user/interface/update_company_message',//修改公司信息
                },
            };
        },
      created() {
          this.show_userinfo();//查询用户信息
      },
        methods: {
            sure_tankaung(){
                this.drawer=true;
                this.show_userinfo();
            },
            show_userinfo() {
                let autohor_token = localStorage.getItem("token");
                let params = {token:autohor_token};
                postAction(domain.publicUrl+this.url.show_data_token,Qs.stringify(params)).then(res=>{
                    let result = res.data;
                    console.log(result)
                    if(result.code==0){
                        this.companyId = result.data.companyId;
                        this.show_companyinfo(result.data.companyId);//查询公司信息
                        //弹框里面的值
                        this.username = result.data.username;
                        this.password = result.data.showpwd;
                        this.paypassword = result.data.payPassword;
                        this.adress = result.data.address;
                        this.realname = result.data.realname;
                    }else{
                        this.$message.error(result.msg)
                    }
                })
            },
            show_companyinfo(id) {
                let params = {companyid:id};
                postAction(domain.publicUrl+this.url.query_companyinfo,Qs.stringify(params)).then(res=>{
                    let result = res.data;
                    if(result.code==0){
                        this.companyName = result.data.companyName;
                        this.companyCode = result.data.companyCode;
                        this.companyAvtar = result.data.companyAvatar;
                        this.aboutPerson = result.data.aboutPerson;
                        this.aboutPhone=result.data.aboutPhone;
                        //弹框里面的值
                        this.company_name=result.data.companyName;
                        this.company_personal=result.data.aboutPerson;
                        this.company_phone=result.data.aboutPhone;
                        this.dialogImageUrl=result.data.companyAvatar;
                    }else{
                        this.$message.error(result.msg)
                    }
                })
            },
            updateset(){
                let autohor_token = localStorage.getItem("token");
                let params = {
                    token:autohor_token,
                    id:this.companyId,
                    companyName: this.company_name,
                    aboutPerson: this.company_personal,
                    aboutPhone: this.company_phone,
                    companyAvatar: this.dialogImageUrl
                };
                // alert(this.dialogImageUrl+"====="+this.companyId)
                postAction(domain.publicUrl+this.url.update_companyinfo, Qs.stringify(params)).then(res => {
                    let result = res.data;
                    console.log(result)
                    if (result.code==0) {
                        this.$message.success("修改成功！")
                        this.show_userinfo();//查询用户信息
                        this.drawer=false;
                    } else {
                        this.$message.error(result.msg)
                    }
                })
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            //上传图片成功函数
            handleSuccess(response,file, fileList) {
                var result = response;
                this.dialogImageUrl = result.data;
            },

            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
        },

    }


</script>

<style lang="scss" scoped>
    .my-company {
        box-sizing: border-box;
        padding: 30px 90px;

        .mc-common-title {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
            margin-bottom: 20px;

            .mcct-left {
                display: flex;
                align-items: center;

                span:nth-child(1) {
                    display: block;
                    width: 5px;
                    height: 25px;
                    background: #4b4b4b;
                }

                span:nth-child(2) {
                    font-size: 16px;
                    font-weight: 500;
                    color: #4e4e4e;
                    margin-left: 15px;
                }
            }

            .mcct-right {
                width: 84px;
                height: 38px;
                background: #333333;
                border-radius: 3px;
                color: #f9d532;
                font-size: 14px;
                cursor: pointer;
            }
        }

        .mc-main {
            background: #fff;
            box-sizing: border-box;
            padding: 20px 40px 30px;

            .mcm-top {
                display: flex;
                justify-content: space-between;

                .mcmt-left {
                    display: flex;

                    .mcmtl-left {
                        width: 80px;
                        height: 80px;
                        border-radius: 50%;
                    }

                    .mcmtl-right {
                        margin-left: 10px;

                        p:nth-child(1) {
                            font-size: 20px;
                            font-weight: 900;
                            color: #545454;
                            line-height: 36px;

                            span {
                                margin-left: 5px;
                                font-size: 14px;
                                font-weight: 500;
                                color: #8c8c8c;
                                cursor: pointer;
                            }
                        }

                        p:nth-child(2) {
                            font-size: 14px;
                            color: #545454;
                            line-height: 20px;
                        }
                    }
                }

                .mcmt-right {
                    cursor: pointer;
                    margin-top: 40px;
                }
            }

            .mcm-two {
                .mcmt-main {
                    display: flex;
                    box-sizing: border-box;
                    padding-left: 20px;

                    .mcmtm-left {
                        min-width: 280px;

                        p {
                            margin-top: 16px;
                            font-size: 16px;
                            font-weight: 500;
                            color: #4e4e4e;
                            display: flex;
                            align-items: center;

                            span {
                                display: block;
                                width: 66px;
                                margin-right: 50px;
                            }
                        }
                    }
                }
            }

            .mcm-pagination {
                text-align: center;
                margin: 35px 0 0;
            }
        }

        .mc-drawer {
            box-sizing: border-box;
            padding: 40px;

            .mcd-top {
                display: flex;
                align-items: center;

                span:nth-child(1) {
                    display: block;
                    width: 6px;
                    height: 28px;
                    background: #545454;
                }

                span:nth-child(2) {
                    font-size: 18px;
                    margin-left: 10px;
                    font-weight: 600;
                    color: #424242;
                }
            }

            .mcd-main {
                margin-top: 50px;

                li {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 15px;

                    p:nth-child(1) {
                        color: #333333;
                        font-weight: 200;
                    }

                    p:nth-child(2) {
                        color: #333333;
                        font-weight: 500;
                    }

                    p:nth-child(3) {
                        color: #d98a2e;
                        font-weight: 200;
                    }
                }
            }

            .mcd-btn {
                width: 100px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                cursor: pointer;
                background: #ffe56d;
                border-radius: 3px;
                color: #333;
                font-weight: 600;
                margin-top: 50px;
            }
        }
    }
</style>
